<script setup>
import { computed, ref, watch } from "vue";
import { useRoute } from 'vue-router'
import AccountCenter from "../../shotstack/MatrixMarketing/AccountCenter.vue";
import CommentMessageIndex from './index.vue';
import DownloadModal from "@/views/shotstack/MatrixMarketing/modules/DownloadModal.vue";
import {InfoCircleOutlined} from "@ant-design/icons-vue";

const downLoadVisible = ref(true)
const route = useRoute()

const activeKey = ref("1");
const isElectron = import.meta.env.ELECTRON

const closeFn = () => {
  downLoadVisible.value = false
  activeKey.value = "1"
}

  watch(
      () => activeKey.value,
      (val) => {
        if (val == '2' && !isElectron) {
          downLoadVisible.value = true
        } else {
          downLoadVisible.value = false
         }
      },
      {
        deep: true,
        immediate: true,
      }
    );
</script>

<template>
  <div class="platform h-full w-full">
    <!-- v-if="isElectron" -->
    <a-tabs v-model:activeKey="activeKey"  style="height: 100%;">
      <a-tab-pane key="1" >
        <template #tab>
          抖音互动管理
          <span>
            <a-tooltip>
              <template #title>因抖音政策调整，评论功能正在维护中，私信正常使用</template>
              <info-circle-outlined />
            </a-tooltip>
            </span>
        </template>
         <div style="position: relative; width: 100%; height: 100%;">
        <CommentMessageIndex />
         </div>
      </a-tab-pane>

      <a-tab-pane key="2" tab="多平台版">
        <div style="position: relative; width: 100%; height: 100%;"  v-if="isElectron">
          <AccountCenter />
        </div>

        <div v-else>
        <DownloadModal
          v-model:visible="downLoadVisible"
          :isPc="true"
          @close="closeFn"
        />
        </div>

      </a-tab-pane>
    </a-tabs>

    <!-- <CommentMessageIndex v-else /> -->

 
  </div>
</template>

<style lang="less" scoped>
.platform {
  position: relative;

  :deep(.ss-tabs-content) {
    height: 100%;
  }
}
</style>
